import { createForm } from 'rc-form';
import { PureComponent } from "react"
import PropTypes from "prop-types"
import renderCom, { comArr } from "../../utils/renderCom"
import "./MForm.less"
import MAction from "../MAction/MAction"
import { isNull, isArrInStr, calcArr, calcField, filterExp, filterTemplate, goToPage, isCheckPer, calcPermissionArr, checkPermission } from "../../utils/helper"

export default class MiBox extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
		}
	}
	componentDidMount() {
	}
	render() {
		let { children = [], options } = this.props;
		const { getFieldDecorator, getFieldValue, setFieldsValue, validateFields, resetFields } = this.props;
		let { dispatch, fd, formDataKey, formData, defaultFormData, isReset, refreshing, com_key } = this.props;
		let el = [];
		children.map((item, key) => {
			let { row_layout = 12, style } = item;
			row_layout = row_layout * 100 / 12 + "%";
			let newItem = {};
			let _obj = {};
			let { permission_ctrl: _ctrl, permission_code: _code } = item;
			if (isCheckPer(_ctrl, _code) && calcPermissionArr.indexOf(_ctrl) != -1) {
				let per = checkPermission(_code);
				if (item[_ctrl] === undefined) {
					item[_ctrl] = per;
				}
				else {
					_obj[_ctrl] = per
				}
			}
			for (let i in item) {
				let val = item[i];
				if (calcArr.indexOf(i) != -1) {
					let isTrue = calcField(val, formData);
					if (calcPermissionArr.indexOf(i) !== -1) {
						isTrue = isTrue && (_obj[i] !== false);
					}
					newItem[i] = isTrue;
				}
			}
			if (newItem.visible !== "0" && newItem.visible !== 0 && newItem.visible !== false) {
				let comType = item.component_type;
				if (comArr[comType]) {
					let className = "page-item";
					if (item.new_group == 1) {
						className += " new_group"
					}
					el.push(<div style={{ width: row_layout, ...style }} key={key} className={className}>
						{renderCom(
							{
								dataset_key: this.props.dataset_key,//把dataset_key传给子组件 
								refreshing,
								model: "form",
								...item,
								...newItem,
								...options,
								options,
								formData,
								defaultFormData,
								getFieldDecorator,
								getFieldValue,
								setFieldsValue,
								validateFields,
								resetFields,
								isReset,
								dispatch,
								location: this.props.location,
								fd,
								formDataKey,
								setFormData: (value) => {
									dispatch({
										type: "form/setFormData",
										payload: {
											key: formDataKey,
											value
										}
									})
								},
								com_key: com_key + "-" + key,
								parent_com:"mi-box"
							})}
					</div>)
				}
			}
		})
		let { componentStyle, vertical = 0, is_center = 0 } = this.props;
		let dataFlex = "dir:left cross:center";
		if (vertical == 1) {
			dataFlex = "dir:top cross:center"
		}
		if (is_center == 1) {//居中显示
			dataFlex += " main:center"
		}
		return <div data-flex={dataFlex} style={{ ...componentStyle }}>
			{el}
		</div>;
	}
}